<template>
  <div class="json-schema-detail">
    <div class="flex-justify-between json-box">
      <div class="box-left text-align-left">
        <div class="box-title">{{title}}</div>
        <div class="pad-all-10">
          <el-tree
            :data="nodes.children"
            node-key="id"
            default-expand-all
            :expand-on-click-node="false">
            <div class="custom-tree-node" slot-scope="{ data }">
              <p>
                <span class="tree-label">{{data.filed}}</span>
                <span class="tree-type">{{data.type}}</span>
              </p>
              <span class="tree-required" v-show="data.isRequired">必需</span>
            </div>
          </el-tree>
        </div>
      </div>
      <div class="box-right text-align-left">
        <div class="box-title ">
          示例
        </div>
        <div>
          <el-input type="textarea" v-model="exampleSchemas" :rows="11" readonly></el-input>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {generateUID, parseSchema,generateSchema} from "@/utils";

  export default {
    name: "JsonSchemaDetail",
    props: {
      title: {
        type: String,
        default: '请求参数'
      },
      schema: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      return {
        nodes: {},
        exampleSchemas:{}
      }
    },
    watch: {
      schema: {
        handler(newVal) {
          console.log(newVal)
          if (newVal) {
            if (Object.keys(newVal).length === 0) {
              this.nodes = {
                id: generateUID(),
                type: 'object',
                title: '',
                filed: '根节点',
                xMock: '',
                description: '',
                isRoot: true,
                children: []
              }
              this.exampleSchemas={}
            } else {
              const jsonString = JSON.stringify(newVal);
              const exampleData = generateSchema(newVal);
              this.nodes = parseSchema(jsonString)
              console.log(123,exampleData)
              this.exampleSchemas=JSON.stringify(exampleData, null, 2)

            }
          }
        },
        immediate: true,
        deep: true
      }
    },
  }
</script>


<style scoped lang="less">
  .json-schema-detail {
    width: 100%;

    .json-box {
      width: 80%;
      border: 1px solid #eee;
      align-items: flex-start;

      .box-title {
        font-size: 14px;
        border-bottom: 1px solid #eee;
        padding: 10px;
        box-sizing: border-box;
      }

      .box-left {
        width: 50%;
        border-right: 1px solid #eee;

        box-sizing: border-box;
        min-height: 200px;
        max-height: 300px;
        overflow: auto;
      }

      .box-right {
        width: 50%;

        box-sizing: border-box;
        min-height: 200px;
        max-height: 300px;
        overflow: auto;
      }

      .custom-tree-node {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;

        .tree-label {
          display: inline-block;
          background: #EAF1FF;
          padding: 1px 5px;
          border-radius: 4px;
          color: #2D69E0;
          margin-right: 8px;
        }

        .tree-required {
          color: #FAAD14;
        }
      }
    }
  }
</style>
